{include "INC_header.html" title="文章标签管理"}
<div id="app-outlet" class="app-outlet">
    <!-- ant-design 应用需要配置 -->
    <a-config-provider :locale="config.locale" :theme="config.theme">
        <div class="app-container">
            <header class="border-bottom light-background padding"><a-button type="primary" @click="addItem"><i class="fa fa-plus margin-right-half"></i> 添加标签</a-button></header>
            <main class="flex-column overflow-hidden">
                <div class="ui table scroll-enable primary selectable" style="border: none; border-radius: 0;">
                    <!-- 表格头部 -->
                    <div class="thead">
                        <div class="ui row">
                            <div class="col"v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">{{ column.title }}</div>
                        </div>
                    </div>
                    <!-- 表格内容 -->
                    <div class="tbody">
                        <div class="ui row" v-for="(item, index) in list.list">
                            <div class="col justify-center" v-for="column in columns" :class="{ 'auto-width':!column.width }" :style="column.width ? ('width:' + column.width) : null">
                                <div v-if="column.key === 'action'">
                                    <a-button class="margin-right" type="primary" @click="editItem(item)">修改</a-button>
                                    <a-popconfirm
                                            title="此操作不可恢复，确定要删除此标签？"
                                            ok-text="确定"
                                            cancel-text="取消"
                                            placement="left"
                                            @confirm="deleteItem(item.id)">
                                        <a-button danger>删除</a-button>
                                    </a-popconfirm>
                                </div>
                                <template v-else-if="column.dataIndex !== undefined">
                                    {{ item[column.dataIndex] || '' }}
                                </template>
                            </div>
                        </div>
                        <div class="empty-list" v-if="list.rows === 0">
                            <a-empty :image="simpleImage" description="没有标签数据">
                                <div class="padding-top"></div>
                                <a-button type="primary" @click="editItem(null)">
                                    <template #icon><i class="fa fa-plus margin-right"></i></template>
                                    添加标签
                                </a-button>
                            </a-empty>
                        </div>
                    </div>
                    <!-- 表格底部 -->
                    <div class="tfoot padding" v-if="list.pages > 1">
                        {include "INC_page.html"}
                    </div>
                </div>
            </main>
        </div>
        <!-- 文件选择器 -->
        <a-modal v-model:visible="item.edit"
                 :title="item.id > 0 ? '修改标签名称' : '添加标签'"
                 :cancel-text="取消"
                 :ok-text="保存"
                 :loading="saveLoading"
                 @ok="save">
            <a-input type="text" v-model:value="item.tag" placeholder="标签名称，尽量4个字以内"></a-input>
        </a-modal>
    </a-config-provider>
</div>
<script>
    //vue app
    const { createApp, defineComponent, ref } = Vue;
    const { message, Empty } = antd;
    const app = createApp({
        data() {
            return {
                //主题配置
                config: appProviderConfig,
                //表头
                columns: [
                    { width:'100px', title:"ID编号", key:"id", dataIndex:"id" },
                    { title:"标签名称", key:"tag", dataIndex:"tag" },
                    { width:'160px', title:"操作", key:"action" }
                ],
                //
                list: {
                    rows: 0,
                    page: 1,
                    pages: 0,
                    list: []
                },
                listQueryParams: {
                    page: 1,
                    total: 30,
                    admin: 1
                },
                item: {
                    edit: false,
                    id: 0,
                    tag: '',
                    saveLoading: false
                }
            }
        },
        mounted() {
            //挂载成功
            this.initData();
        },
        methods: {
            //方法
            initData() {
                this.getList();
            },
            getList() {
                let self = this;
                const hide = message.loading("正在加载...", 0);
                axios.get("{url url='/cms/api/tags/list'}", {
                    params: this.listQueryParams
                }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        self.list = data.data;
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙");
                });
            },
            //首页
            firstPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = 1;
                    this.getList();
                }
            },
            //上一页
            prevPage : function (){
                let page = parseInt(this.list.page);
                if(page > 1){
                    this.listQueryParams.page = page - 1;
                    this.getList();
                }
            },
            //下一页
            nextPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = page + 1
                    this.getList();
                }
            },
            //最后一页
            lastPage : function (){
                let page = parseInt(this.list.page);
                let pages = parseInt(this.list.pages);
                if(page < pages){
                    this.listQueryParams.page = pages;
                    this.getList();
                }
            },
            //设置跳到第几页
            setPage : function (page){
                page = isNaN(page) ? -1 : parseInt(page);
                page = page > 0 ? page : -1;
                if(page === -1){
                    message.error('参数错误');
                }else if(page !== this.list.page){
                    this.listQueryParams.page = page;
                    this.getList();
                }
            },
            //设置参数，重载列表
            setListQueryParam : function (params){
                //通过替换key值的方式
                for(let key in params){
                    this.listQueryParams[key] = params[key];
                }
                this.getList();
            },
            editItem(_item) {
                this.item.id = _item ? _item.id : 0;
                this.item.name = _item ? _item.name : 0;
                this.item.edit = true;
                this.item.saveLoading = false;
            },
            //保存
            save() {
                let self = this;
                this.item.saveLoading = true;
                axios.post("{url url='/cms/api/tags/save'}", {
                    id: this.item.id,
                    tag: this.item.tag
                }).then(({ data }) => {
                    this.item.saveLoading = false;
                    if (data.error === 0) {
                        //重载数据
                        self.getList(self.siteId);
                        message.success("数据保存成功");
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    this.item.saveLoading = false;
                    message.error("服务端繁忙");
                });
            },
            deleteItem(id) {
                let self = this;
                const hide = message.loading("正在删除...", 0);
                axios.post("{url url='/cms/api/tags/delete'}", { id }).then(({ data }) => {
                    hide();
                    if (data.error === 0) {
                        //删除
                        self.getList();
                    } else {
                        message.error(data.message);
                    }
                }).catch(() => {
                    hide();
                    message.error("服务端繁忙")
                });
            }
        }
    }).use(antd);
    //挂载
    const vm = app.mount("#app-outlet");
    //
    if (window.parent) {
        window.parent.postMessage({
            event: "location",
            data: [
                { name:"文章标签管理" }
            ]
        });
    }
</script>
{include "INC_footer.html"}